<html>
<head>
	<style type="text/css" media="screen">@import "jqt/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "jqt/theme.css";</style>
	<style type="text/css" media="screen">
	body {
		font-size: 22px;
	}
	
	body>* {
		background: #5B5B5B;
	}
	
	button {
		padding: 5px;
		font-size: 16px;
	}
	
	#inputCont {
		position: relative;
		margin-left: 10;
		margin-right: 10;
	}
	
	.englishWord {
		color: red;
		padding-left: 30px;
	}
	
	.spanishWord {
		font-style: italic;
		padding-left: 50px;
	}
	
	#goButton {
		position: absolute;
		top: 8;
		right: 6;
	}
	
	#eword {
		position: absolute;
		top: 0;
		left: 100;
		right: 80;
		font-size: 16px;
	}
	
	#sword {
		position: absolute;
		top: 26;
		left: 100;
		right: 80;
		font-size: 16px;
	}
	
	#addWord {
		position: relative;
		text-align: center;
	}
	
	#addWithHintOverlay {
		position: absolute;
		top: 20;
		bottom: 20;
		left: 20;
		right: 20;
		background-color: #FFFFFF;
		border: 2px solid #000000;
		text-align: center;
	}
	
	.wordCont {
		position: relative;
		width: 320;
	}
	
	.deleteWordButton {
		position: absolute;
		top: 7;
		right: 16;
	}
	
	#flashCardsCounter {
		position: relative;
		font-size: 16px;
		text-align: right;
		margin-left: 10;
		margin-right: 10;
	}
	
	.qaLabel {
		position: relative;
		margin-left: 10;
		margin-right: 10;
	}
	
	.qa {
		position: relative;
		text-align: center;
		font-size: 30px;
		height: 110;
		vertical-align: middle;H
	}
	
	#showAnswerDiv {
		position: relative;
		text-align: center;
	}
	
	#rateAnswerDiv {
		position: relative;
		text-align: center;
	}
	
	#fcDoneDiv {
		font-size: 40px;
		text-align: center;
	}
	
	.menuConatiner {
		height: 70;
		text-align: center;
		font-size: 14px;
		position: relative;
	}
	
	.menu1 {
		position: absolute;
		left: 0;
		width: 106;
	}
	
	.menu2 {
		position: absolute;
		left: 107;
		width: 106;
	}
	
	.menu3 {
		position: absolute;
		left: 214;
		width: 106;
	}
	
	div {
		position: relative;
		border: 1px solid red;
	}
	</style>
	<title>Babel</title>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jqt/jqtouch.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/fixed.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch({
			statusBar: 'black',
			icon: 'babel-icon.png',
			addGlossToIcon: true, // defaults to true
			startupScreen: 'babel-startup.png'
		});
	var username="vadim";
	var serverStr = 'http://ogievetsky.com/CS147/babel-server.php';
	var foundEnglishWord = '';
	var foundSpanishWord = '';
	var flashCards;
	var cardNumber = 1;
	$(document).ready(function() {
		$.getJSON(serverStr, {cmd: "wordlist", user: username}, function(response) {
			for (var word in response) {
				addWord(word, response[word], true);
			}
		})
		
		$.getJSON(serverStr, {cmd: "flashlist", user: username}, function(response) {
			flashCards = response;
			$("#flashCardsCounter").html(cardNumber + ' of ' + flashCards.length);
			$("#question").html(flashCards[cardNumber-1]['e']);
			$("#answer").html("______");
			$("#showAnswerDiv").attr("style", "display: ");
			$("#rateAnswerDiv").attr("style", "display: none");
		})
	})
	
	function addWord(english, spanish, append) {
		var newDiv = $('<div class="wordCont"><span class="englishWord">' + english + '</span><br/><span class="spanishWord">' + spanish + '</span><button class="deleteWordButton" type="button" onclick="onDeleteWordClick(event)">X</button></div>');
		if(append) {
			newDiv.appendTo('#wordlist');
		} else {
			newDiv.prependTo('#wordlist');
		}
	}
	
	function onSearchTextChange() {
		goButton.disabled = ((eword.value == '') && (sword.value == '')) || ((eword.value != '') && (sword.value != ''));
	}
	
	function onSearch() {
		var eng_word = document.getElementById("eword").value;
		var spa_word = document.getElementById("sword").value;
		if(eng_word != '') {
			$.getJSON(serverStr, {cmd: 'lookup-e2s', word: eng_word}, function(response){
				if(response.length >= 1) {
					document.getElementById("sword").value = response[0];
					foundEnglishWord = eng_word;
					foundSpanishWord = response[0];
					goButton.disabled = true;
					document.getElementById("addWord").style.display = '';
				} else {
					alert('Word not found');
				}
			})
		} else if(spa_word != '') {
			$.getJSON(serverStr, {cmd: 'lookup-e2s', word: spa_word}, function(response){
				if(response.length >= 1) {
					document.getElementById("eword").value = response[0];
					foundSpanishWord = spa_word;
					foundEnglishWord = response[0];
					goButton.disabled = true;
					document.getElementById("addWord").style.display = '';
				} else {
					alert('Word not found');
				}
			})
		}
	}
	
	function clearDict() {
		foundEnglishWord = '';
		foundSpanishWord = '';
		document.getElementById("eword").value = '';
		document.getElementById("sword").value = '';
		document.getElementById("addWord").style.display = 'none';
	}
	
	function onDiscardClick() {
		clearDict();
	}
	
	function addWithHintClick() {
		$("#addWithHintOverlay").attr("style", "display: ");
	}
	
	function onAddWithHintCancelClick() {
		$("#addWithHintOverlay").attr("style", "display: none");
	}
	
	function onAddClick() {
		addWord(foundEnglishWord, foundSpanishWord, false);
		$.get(serverStr, {cmd: "addword", user: username, eword: foundEnglishWord, sword: foundSpanishWord});
		clearDict();
	}
	
	function onDeleteWordClick(e) {
		var clickedDiv = e.target.parentNode;
		var clickedEnglishWord = clickedDiv.childNodes[0].innerHTML;
		var clickedSpanishWord = clickedDiv.childNodes[2].innerHTML;
		$.get(serverStr, {cmd: "deleteword", user: username, eword: clickedEnglishWord, sword: clickedSpanishWord});
		$(clickedDiv).remove();
	}
	
	function showAnswerClick() {
		$("#answer").html(flashCards[cardNumber-1]['s']);
		$("#showAnswerDiv").attr("style", "display: none");
		$("#rateAnswerDiv").attr("style", "display: ");
	}
	
	function rateAnswerClick(e) {
		if(cardNumber < flashCards.length) {
			cardNumber++;
			$("#flashCardsCounter").html(cardNumber + ' of ' + flashCards.length);
			$("#question").html(flashCards[cardNumber-1]['e']);
			$("#answer").html("______");
			$("#showAnswerDiv").attr("style", "display: ");
			$("#rateAnswerDiv").attr("style", "display: none");
		} else {
			$(".fc").attr("style", "display: none");
			$("#fcDoneDiv").attr("style", "display: ");
		}
	}
	
	function goToDictionary() { jQT.goTo('#dictionary'); }
	function goToFlashCrads() { jQT.goTo('#flashCards'); }
	function goToSocial() { jQT.goTo('#social'); }
	
	function goToPhotoHint() { jQT.goTo('#photoHint'); }
	</script>
</head>
<body>
	<div id="dictionary">
		<div class="menuConatiner">
			<div class="menu1">
				<img src="assets/dictionary.png" alt="Dictionary"/>
				<br/>Dictionary
			</div>
			<div class="menu2" onclick="goToFlashCrads()">
				<img src="assets/flashcards.png" alt="Flash Cards"/>
				<br/>Flash Cards
			</div>
			<div class="menu3" onclick="goToSocial()">
				<img src="assets/socialnetwork.png" alt="Social"/>
				<br/>Social
			</div>
		</div>
    	<div id="inputCont">
    		English:<input type="text" id="eword" onkeyup="onSearchTextChange()"/><br/>
    		Spanish:<input type="text" id="sword" onkeyup="onSearchTextChange()"/>
			<button id="goButton" type="button" onclick="onSearch()" disabled="true">Go!</button>
    	</div>
		<div id="addWord" style="display: none">
			<button id="discardButton" type="button" onclick="onDiscardClick()">X</button>
			<button id="addWithHintButton" type="button" onclick="addWithHintClick()">Add with hint...</button>
			<button id="addButton" type="button" onclick="onAddClick()">Add</button>
    	</div>
    	<div id="wordlist">
    	</div>
		<div id="addWithHintOverlay" style="display: none">
			<img src="assets/text.png" alt="Text hint"/>
			<img src="assets/camera1.png" alt="Photo hint" onclick="goToPhotoHint()"/>
			<img src="assets/microphone.png" alt="Voice hint"/>
			<br/>
			<button id="addButton" type="button" onclick="onAddWithHintCancelClick()">Cancel</button>
		</div>
	</div>
	
	<div id="flashCards">
		<div class="menuConatiner">
			<div class="menu1" onclick="goToDictionary()">
				<img src="assets/dictionary.png" alt="Dictionary"/>
				<br/>Dictionary
			</div>
			<div class="menu2">
				<img src="assets/flashcards.png" alt="Flash Cards"/>
				<br/>Flash Cards
			</div>
			<div class="menu3" onclick="goToSocial()">
				<img src="assets/socialnetwork.png" alt="Social"/>
				<br/>Social
			</div>
		</div>
    	<div id="flashCardsCounter" class="fc">Loading...</div>
    	<div class="qaLabel fc">Question:</div>
		<div class="qa fc" id="question">...</div>
		<div class="qaLabel fc">Answer:</div>
		<div class="qa fc" id="answer">...</div>
		<div id="showAnswerDiv" class="fc">
			<button type="button" onclick="showAnswerClick()">Show answer</button>
		</div>
		<div id="rateAnswerDiv" class="fc">
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">0</button>
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">1</button>
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">2</button>
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">3</button>
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">4</button>
			<button type="button" class="rateButton" onclick="rateAnswerClick(event)">5</button>
		</div>
		<div id="fcDoneDiv" style="display: none">
			All Done<br/>
			:-)
		</div>
	</div>
	
	<div id="social">
		<div class="menuConatiner">
			<div class="menu1" onclick="goToDictionary()">
				<img src="assets/dictionary.png" alt="Dictionary"/>
				<br/>Dictionary
			</div>
			<div class="menu2" onclick="goToFlashCrads()">
				<img src="assets/flashcards.png" alt="Flash Cards"/>
				<br/>Flash Cards
			</div>
			<div class="menu3">
				<img src="assets/socialnetwork.png" alt="Social"/>
				<br/>Social
			</div>
		</div>
    	Social
	</div>
	
	<div id="photoHint">
		<img src="assets/delete.png" alt="Delete" onclick="goToDictionary()"/>
		<img src="assets/camera1.png" alt="Camera"/>
		<img src="assets/check2.png" alt="Accept"/>
	</div>
</body>
</html>